<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh">

<head>
<title>牧车邦</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no" />
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>牧车邦</title>
<link rel="stylesheet" type="text/css" href="css/swiper.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<style>
.hide-center {
	width: 308px;
	height: 300px;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	display: none;
	z-index: 1;
}

.hide-center #formhead {
	width: 300px;
	height: 42px;
	margin: 0;
	padding-top: 12px;
	padding-bottom: -30px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #101010;
}

.hide-center #formhead-title {
	width: 100px;
	height: 24px;
	margin-left: 106px;
	margin-right: 36px;
	color: #bfbfbf;
	font-weight: 900;
	display: inline-block;
}

.hide-center #close {
	width: 35px;
	height: 20px;
	border: 0;
	border-radius: 20%;
	background-color: red;
	color: white;
	display: inline-block;
}

.hide-center #formbody {
	width: 300px;
	height: 245px;
	background-color: #1e1e1e;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.hide-center .loginHead {
	margin-right: -8px;
	padding: 13px;
	width: 25px;
	height: 28px;
	background-color: #141414;
	vertical-align: middle;
}

.hide-center .loginInput {
	height: 52px;
	width: 230px;
	padding-left: 10px;
	border: 0;
	background-color: #141414;
	color: aliceblue;
}

.hide-center .loginUserName {
	padding-left: 30px;
	padding-top: 30px;
}

.hide-center .login1 #img-topleft-loginHead {
	border-top-left-radius: 5px;
}

.hide-center .login1 #input-topright-loginInput {
	border-top-right-radius: 5px;
}

.hide-center .login1 #img-bottomleft-loginHead {
	border-bottom-left-radius: 5px;
}

.hide-center .login1 #input-bottomright-loginInput {
	border-bottom-right-radius: 5px;
}

.hide-center .loginPassword {
	padding-left: 30px;
}

.hide-center #formfoot {
	margin-top: 30px;
	margin-left: 30px;
}

.hide-center #BSignIn {
	border: 0;
	background: #329d90;
	color: #ffffff;
	width: 120px;
	height: 40px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
</style>

</head>

<body>
	<div class="navbg"></div>
	<header>
		<div class="logo">
			<img src="./images/logo.png" alt="">
		</div>
		<div class="nav">Menu菜单</div>
		<nav id="menu-nav-wrap">
			<ul class="nav-list">
				<li class="current"><a href="index.jsp"><span>01</span>首页</a>
				</li>
				<li><a href="PartsServlet?op=yhby"><span>02</span>车辆保养</a></li>
					<li><a href="PartsServlet?op=mrby"><span>03</span>车辆美容</a></li>
					<li><a href="PartsServlet?op=wxby"><span>04</span>车辆维修</a></li>
					<li><a href="HelpServlet?op=msi"><span>05</span>车辆救援</a></li>
				<li><a href="partner.html"><span>06</span>合作伙伴</a></li>
				<li><a href="hdzq.html"><span>07</span>企业活动</a></li>
				<li><a href="about.html"><span>08</span>关于我们</a></li>
				<li><a id="login"><span>09</span>登录注册</a></li>

			</ul>
		</nav>
	</header>

	<div class="kefu">
		<ul>
			<li><a target="<a" class="ui-link"></a> <a href="#"
				class="ui-link">
					<div class="sidebox">
						<b class="icon1">电</b><span>400-885-5191</span>
					</div>
			</a></li>
			<li><a href="#" class="ui-link">
					<div class="sidebox">
						<b class="icon2">微</b><span>888888888888</span>
					</div>
			</a></li>
			<li><a href="#" class="ui-link">
					<div class="sidebox">
						<b class="icon3">博</b><span>888888888888</span>
					</div>
			</a></li>
		</ul>
	</div>

	<div id="container">
		<div class="section active" id="section0">

			<div class="home">当前页 | Home</div>
			、
			<div class="page">下一页 > car serve</div>
			<div class="midle">

				<div class="intro">
					<h3>MCB,Vehicle Service to Find mcb</h3>
					<form action="login.do?op=login" method="post">
						<div class="hide-center">
							<div id="formhead">
								<div id="formhead-title">用户登录</div>
								<button type="button" id="close">X</button>
							</div>
							<div id="formbody">
								<div class="loginUserName">
									<input id="input-topright-loginInput" name="username"
										class="loginInput" placeholder="账户" type="text">
								</div>
								<div class="loginPassword">
									<input id="input-bottomright-loginInput" name="userpwd"
										class="loginInput" placeholder="密码" type="password"
										style="border-bottom-right-radius: 5px;">
								</div>
								<div id="formfoot">
									<button id="BSignIn" type="submit">登录</button>
									<button id="BSignIn" type="submit"><a href="reg.jsp" id="BSignIn">注册</a></button>

								</div>

							</div>
						</div>
					</form>
					<p>
						<c:if test="${msg!=null }">
								${msg }
								</c:if>
					</p>
					<script>
						$("#login").click(function() {
							$(".hide-center").fadeIn("slow");
							$(".overCurtain").fadeIn("slow");
						})
						$("#close").click(function() {
							$(".hide-center").fadeOut("slow")
							$(".overCurtain").fadeOut("slow")
						})
					</script>

					<h5>牧车邦●车辆服务就找牧车邦</h5>

				</div>
			</div>
		</div>

		<div class="section" id="section1">
			<div class="home">当前页 | Service</div>
			<div class="page">下一页 > About us</div>
			<div class="midle">
				<div class="intro">
					<h3>MCB Service</h3>
					<h5>畅行无忧，乐享生活</h5>
					<div class="inmain">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div class="swiper-slide">
									<div class="img">
										<img src="./images/ser1.png" alt="">
									</div>
									<div class="info">
										<h2>车辆美容保养</h2>
										<div>牧车帮汽车服务平台，提供免费的车辆维护管理系统；汽车维修、电路、汽...</div>
										<a href="">View More</a>
									</div>
								</div>

								<div class="swiper-slide">
									<div class="img">
										<img src="./images/ser2.png" alt="">
									</div>
									<div class="info">
										<h2>车辆维修业务</h2>
										<div>牧车帮汽车服务平台，提供免费的车辆机务管理系统；车辆过户、上牌、审...</div>
										<a href="">View More</a>
									</div>
								</div>

								<div class="swiper-slide">
									<div class="img">
										<img src="./images/ser3.png" alt="">
									</div>
									<div class="info">
										<h2>车辆救援服务</h2>
										<div>牧车帮汽车服务平台，提供免费的车辆数据管理系统；违章查询、处理、销...</div>
										<a href="">View More</a>
									</div>
								</div>

							</div>
							<!-- Add Arrows -->
							<div class="swiper-button-next"></div>
							<div class="swiper-button-prev"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="section" id="section2">
			<div class="home">当前页 | About us</div>
			<div class="page">下一页 > News center</div>
			<div class="midle">
				<div class="intro">
					<h3>Commitment to professional integrity</h3>
					<h5>专业、诚信、承诺、承担</h5>
					<p class="tit">以专业赢得信赖，以服务提升价值，以诚信正直建立信任与负责任的服务关系。公司承诺，牧车帮每一位员工都致力于为客户提供专业、高效、方便、安全、省心的车务服务与信息咨询服务。</p>
					<img src="./images/about.png" alt="">
				</div>
			</div>
		</div>
		<div class="section" id="section3">
			<div class="home">当前页 | News center</div>
			<div class="page">下一页 > Home</div>
			<div class="midle">
				<div class="intro">
					<h3>Best service, beyond your expectation</h3>
					<h5>精湛技艺 极致服务 超越您的期望</h5>
					<div class="news">
						<div class="news_li">
							<div class="li_img">
								<img src="./images/news1.png" alt="">
								<div class="li_info midle">
									<a>More/更多</a>
								</div>
							</div>
							<p>企业资讯</p>
						</div>
						<div class="news_li">
							<div class="li_img">
								<img src="./images/news2.png" alt="">
								<div class="li_info midle">
									<a>More/更多</a>
								</div>
							</div>
							<p>企业活动</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="js/swiper.js"></script>
	<script type="text/javascript" src="js/switchPage.js"></script>
	<script type="text/javascript">
		$(function() {
			$('header .nav').click(function() {
				$('.navbg').toggle();
				$('header').toggleClass('menu-is-open');
			})
			$('.navbg').click(function() {
				$('.navbg').hide();
				$('header').removeClass('menu-is-open');
			})

			$("#container").switchPage({
				'loop' : true,
				'keyboard' : true,
				'direction' : 'scrollCoverOut'
			});

			$(".kefu ul li").hover(function() {
				$(this).find(".sidebox").stop().animate({
					"width" : "220px"
				}, 200);
			}, function() {
				$(this).find(".sidebox").stop().animate({
					"width" : "50px"
				}, 200);
			});

		});
		

		var swiper = new Swiper('.swiper-container', {
			slidesPerView : 3,
			spaceBetween : 30,
			breakpoints : {
				768 : {
					slidesPerView : 2,
					spaceBetween : 20,
				},
				640 : {
					slidesPerView : 1,
					spaceBetween : 10,
				}
			},
			loop : true,
			loopFillGroupWithBlank : true,
			navigation : {
				nextEl : '.swiper-button-next',
				prevEl : '.swiper-button-prev',
			},
		});
	</script>

</body>

</html>